<template>
  <div class="docDetail">
    <div class="top flex-center-start" @click="goBack">
      <div class="back"></div>
      <div class="tit">返回</div>
    </div>
    <span class="download" @click="download">
      <el-tooltip effect="dark" content="下载" placement="top">
        <em class="el-icon-download" />
      </el-tooltip>
    </span>
    <div class="mid-wrap" v-loading="loading" element-loading-text="加载中">
      <!-- 显示pdf文件 -->
      <pdf
        :src="src"
        @page-loaded="pageLoaded"
        @loaded="loadPdfHandler"
        v-for="i in pdfTotal"
        :key="i"
        :page="i"
      >
      </pdf>
    </div>
    <!-- 评价 -->
    <div class="evaluate">
      <div class="title">评价:</div>
      <p v-if="showEvaluate" class="noEvaluate">暂无评价</p>
      <ul
        class="evaluateList"
        v-for="(item, index) in evaluateList"
        :key="index"
      >
        <li>
          <dd>
            <span>{{ item.userName }}</span
            ><span v-if="item.score === 1">(清晰度：模糊)</span
            ><span v-if="item.score === 2">(清晰度：一般)</span
            ><span v-if="item.score === 3">(清晰度：清晰)</span>
          </dd>
          <dt>{{ item.createTime }}</dt>
        </li>
        <li>{{ item.evaluate }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import pdf from "vue-pdf";
export default {
  components: { pdf },
  data() {
    return {
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      fileType: "pdf", // 文件类型
      src: "", // pdf文件地址
      loading: true, //加载中
      pdfTotal: 1, // pdf总页数
      pdfNum: 1, // 当前页
      evaluateList: [],
      showEvaluate: false,
    };
  },
  activated() {
    // 修改文件样式   全都改成pdf格式
    console.log(this.$route.params.item);
    // 页数
    this.pdfTotal = this.$route.params.item.pageNumber;
    if (this.$route.params.item) {
      this.src =
        window.VUE_APP_BASE_URL + "/" + this.$route.params.item.fileUrl;
      console.log(888, this.src);
      if (this.src.split(".word")[0].length != this.src.length) {
        this.src = this.src.split(".word")[0] + ".pdf";
      }
      if (this.src.split(".doc")[0].length != this.src.length) {
        this.src = this.src.split(".doc")[0] + ".pdf";
      }
      if (this.src.split(".ppt")[0].length != this.src.length) {
        this.src = this.src.split(".ppt")[0] + ".pdf";
      }
      console.log(999, this.src);
      this.src = pdf.createLoadingTask(this.src);
    } else {
      this.$router.go(-1);
    }
    this.dataEvaluate();
    // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
  },
  methods: {
    async dataEvaluate() {
      let data = await this.$api.dataEvaluate({
        id: this.$route.params.item.id,
      });
      console.log(data);
      if (data.dataEvaluateList.length == 0) {
        this.showEvaluate = true;
      } else {
        this.evaluateList = data.dataEvaluateList;
      }
    },
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage(val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
    // pdf加载时
    loadPdfHandler() {
      this.currentPage = 1; // 加载的时候先加载第一页
    },
    goBack() {
      this.$router.go(-1);
    },
    pageLoaded(e) {
      if (e >= 1) {
        this.loading = false;
      }
    },
    handlePdfTask(task) {
      task.promise
        .then((Pdf) => {
          this.pdfTotal = Pdf.numPages;
        })
        .catch((err) => {
          console.error("pdf 加载失败", err);
        });
    },
    // 文件下载
    download() {
      let url = `${window.VUE_APP_BASE_URL}/file/fileDown?`;
      const fileUrl = this.$route.params.item.fileUrl + "";
      url += "fileUrl=" + fileUrl;
      window.location.href = url;
      /* console.log("this.proItem", this.proItem);
      let url = `${window.VUE_APP_BASE_URL_SHOW}/qbservices/file/fileDown?`;
      const fileUrl = this.proItem.fileUrl + "";
      const connectionType = this.proItem.connectionType;
      const fileName = fileUrl.substring(
        fileUrl.lastIndexOf("/") + 1,
        fileUrl.length
      );
      const uploadFileName = this.proItem.uploadFileName;
      url += "connectionType=" + connectionType;
      url += "&fileName=" + fileName;
      url += "&uploadFileName=" + uploadFileName;
      window.location.href = url;
      // 下载量
      this.updateById({
        connectionType: this.proItem.connectionType,
        id: this.proItem.id,
        downloads: 1,
      });
      const connectionType = this.$route.params.item.connectionType;
      const fileName = fileUrl.substring(
        fileUrl.lastIndexOf("/") + 1,
        fileUrl.length
      );
      const uploadFileName = this.$route.params.item.uploadFileName;
      url += "connectionType=" + 1;
      url += "&fileName=" + fileName;
      url += "&uploadFileName=" + uploadFileName; */
    },
  },
};
</script>

<style lang="scss" scoped>
.docDetail {
  position: relative;
  // padding-right: 2.87rem;
  margin-bottom: 0.3rem;
  .top {
    margin-top: 0.3rem;
    margin-left: 0.6rem;
    .back {
      background-image: url(~@/assets/images/back@2x.png);
      width: 0.08rem;
      height: 0.14rem;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
    .tit {
      cursor: pointer;
      margin-left: 0.1rem;
      font-size: 0.14rem;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #1890ff;
      line-height: 0.47rem;
    }
  }
  .mid-wrap {
    margin: 0 auto;
    width: 16rem;
    min-height: 8.94rem;

    border-radius: 0.1rem;
    .pdf-con {
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
    .video-con {
      margin-top: 0.3rem;
    }
  }
  ::v-deep .el-loading-spinner {
    top: 35.5vh;
  }
}
.evaluate {
  margin-top: 0.6rem;
  // @include scrollBar;
  // overflow-y: auto;
  .title {
    width: 100%;
    padding: 0 2.76rem;
    height: 0.48rem;
    line-height: 0.48rem;
    background: rgba($color: #1890ff, $alpha: 0.3);
    font-size: 0.2rem;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #ffffff;
  }
  .noEvaluate {
    font-size: 0.18rem;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #ffffff;
    margin: auto;
    text-align: center;
  }
  .evaluateList {
    width: 80%;
    margin: 0 auto;
    padding: 0.2rem 1.16rem;
    border-bottom: 2px solid #404040;
    li {
      display: flex;
      margin-top: 0.1rem;
      justify-content: space-between;
      dd {
        span:nth-of-type(1) {
          margin-right: 0.4rem;
          font-size: 0.14rem;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          color: #898988;
        }
        span:nth-of-type(2) {
          font-size: 0.14rem;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          color: #fba613;
        }
      }
      dt {
        font-size: 0.14rem;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #ffffff;
      }
    }
    li:nth-of-type(2) {
      font-size: 0.18rem;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #ffffff;
    }
  }
}
.download {
  width: 0.26rem;
  height: 0.26rem;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 2.6rem;
  color: #ffffff;
}
::v-deep.el-icon-download {
  font-size: 0.2rem !important;
}
</style>